<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="http://source.binlive.cn/jquery.3.2.1.min.js"></script>
    <script src="http://source.binlive.cn/gVerify.js"></script>
    <script src="http://source.binlive.cn/md5.min.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="http://www.binlive.cn/dist/favicon.ico"
          media="screen"/>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
    }

    * {
        margin: 0px auto;
        padding: 0px;
        text-align: center;
        font-family: 'Lato', sans-serif;
    }

    .cotn_principal {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfd8dc+0,607d8b+100,b0bec5+100 */
        background: #aac4bc; /* Old browsers */
        background: -moz-linear-gradient(-45deg, #23262b 0%, #222d31 100%, #84c3d4 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg, #23262b 0%, #1a7a93 100%, #18424e 100%); /* Chrome10-25,Safari5.1-6 */
        /*background: linear-gradient(135deg, #23262b 0%,#222d31 100%,#eed5a9 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfd8dc', endColorstr='#b0bec5', GradientType=1); /* IE6-9 fallback on horizontal gradient */

    }

    .cont_centrar {
        position: relative;
        float: left;
        width: 100%;
        margin-top: 10%

    }

    .cont_login {
        position: relative;
        width: 640px;
        left: 50%;
        margin-left: -320px;
        z-index: 999999999999999999;

    }

    .cont_back_info {
        position: relative;
        float: left;
        width: 640px;
        overflow: hidden;
        height: 280px;
        background-color: #fff;
        margin-top: 100px;
        box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);
    }

    .cont_forms {
        position: absolute;
        overflow: hidden;
        top: 100px;
        left: 0px;
        width: 320px;
        height: 280px;
        background-color: #eee;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .cont_forms_active_login {
        box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);
        height: 420px;
        top: 20px;
        left: 0px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;

    }

    .cont_forms_active_sign_up {
        box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);
        height: 420px;
        top: 20px;
        left: 320px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .cont_img_back_grey {
        position: absolute;
        width: 950px;
        top: -80px;
        left: -116px;
    }

    .close2 {
        position: absolute;
        top: -30px !important;
        margin: inherit !important;
        left: 20px !important
    }

    .cont_img_back_grey > img {
        width: 100%;
        /*-webkit-filter: grayscale(100%);     filter: grayscale(100%);*/
        opacity: 0.6;
        animation-name: animar_fondo;
        animation-duration: 20s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .cont_img_back_ {
        position: absolute;
        width: 950px;
        top: -80px;
        left: -116px;
    }

    .cont_img_back_ > img {
        width: 100%;
        opacity: 0.3;
        animation-name: animar_fondo;
        animation-duration: 15s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .cont_forms_active_login > .cont_img_back_ {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .cont_forms_active_sign_up > .cont_img_back_ {
        left: -235px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .cont_info_log_sign_up {
        position: absolute;
        width: 640px;
        height: 280px;
        top: 100px;
        z-index: 1;
    }

    .col_md_login {
        position: relative;
        float: left;
        width: 50%;
    }

    .col_md_login > h2 {
        font-weight: 400;
        margin-top: 70px;
        color: #757575;
    }

    .col_md_login > p {
        font-weight: 400;
        margin-top: 15px;
        color: #37474F;
    }

    button {
        outline: none
    }

    .cont_form_sign_upadd input {
        outline: none
    }

    .btn_login {
        background-color: #FF9800;
        border: none;
        padding: 10px;
        width: 200px;
        border-radius: 3px;
        box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.4);
        color: #fff;
        margin-top: 30px;
        cursor: pointer;
    }

    .login {
        background-color: #FF9800;
        border: none;
        padding: 10px;
        width: 200px;
        border-radius: 3px;
        box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.4);
        color: #fff;
        margin-top: 50px;
        cursor: pointer;
        z-index: 99999;
        position: relative;
    }

    .qrcodebox {
        height: 270px;
        height: 46px;
        padding-left: 25px;
        margin-top: 20px;
    }

    .qrcodebox img {
        height: 46px;
        float: left;
        margin-left: 12px;
        width: 100px;
    }

    .qrcodebox input {
        float: left;
        border: none;
        padding: 15px 5px;
        width: 100px;
        border: none;
        text-align: left;
        color: #757575;
    }

    .col_md_sign_up {
        position: relative;
        float: left;
        width: 50%;
    }

    .cont_ba_opcitiy > h2 {
        font-weight: 400;
        color: #fff;
    }

    .cont_ba_opcitiy > p {
        font-weight: 400;
        margin-top: 15px;
        color: #fff;
        padding: 0px 20px;
        min-height: 36px;
    }

    /* ----------------------------------
    background text
    ------------------------------------
     */
    .cont_ba_opcitiy {
        position: relative;
        background-color: rgba(0, 0, 0, 0.49);
        width: 80%;
        border-radius: 3px;
        margin-top: 60px;
        padding: 15px 0px;
    }

    .btn_sign_up {
        background-color: #f44336;
        border: none;
        padding: 10px;
        width: 200px;
        border-radius: 3px;
        box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.4);
        color: #fff;
        margin-top: 30px;
        cursor: pointer;
    }

    .cont_forms_active_sign_up {
        z-index: 2;
    }

    @-webkit-keyframes animar_fondo {
        from {
            -webkit-transform: scale(1) translate(0px);
            -moz-transform: scale(1) translate(0px);
            -ms-transform: scale(1) translate(0px);
            -o-transform: scale(1) translate(0px);
            transform: scale(1) translate(0px);
        }
        to {
            -webkit-transform: scale(1.5) translate(50px);
            -moz-transform: scale(1.5) translate(50px);
            -ms-transform: scale(1.5) translate(50px);
            -o-transform: scale(1.5) translate(50px);
            transform: scale(1.5) translate(50px);
        }
    }

    @-o-keyframes identifier {
        from {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        to {
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
        }

    }

    @-moz-keyframes identifier {
        from {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        to {
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
        }

    }

    @keyframes identifier {
        from {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        to {
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
        }
    }

    .cont_form_login {
        position: absolute;
        opacity: 0;
        display: none;
        width: 320px;
        top: 490px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .cont_forms_active_login {
        z-index: 2;
    }

    .cont_form_sign_up {
        position: absolute;
        width: 320px;
        float: left;
        opacity: 0;
        display: none;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .cont_form_sign_up > input {
        text-align: left;
        padding: 15px 5px;
        margin: 0 auto;
        margin-top: 20px;
        width: 260px;
        border: none;
        color: #757575;
    }

    .cont_form_sign_up > h2 {
        margin-top: 80px;
        font-weight: 400;
        color: #757575;

    }

    .cont_form_login > input {
        padding: 15px 5px;
        margin: 0 auto;
        margin-top: 20px;
        width: 260px;
        border: none;
        text-align: left;
        color: #757575;
    }

    .cont_form_login {
        margin-top: 472px
    }

    .cont_form_login > h2 {
        margin-top: 120px;
        font-weight: 400;
        color: #757575;
    }

    .cont_form_login > a, .cont_form_sign_up > a {
        color: #757575;
        position: relative;
        float: left;
        margin: 10px;
        margin-left: 20px;
    }

    .material-icons {
        width: 20px;
        height: 20px;
        background: url("dist/close.png");
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        margin-top: 76px;
    }

    @-webkit-keyframes tosign_up {
        0% {
            margin-left: -160px;
        }
        100% {
            margin-left: -480px;
        }
    }

    @keyframes tosign_up {
        0% {
            left: 50%
        }
        100% {
            margin-left: -480px;
        }
    }

    .tosign_up {
        -webkit-animation-name: tosign_up;
        animation-name: tosign_up;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    @-webkit-keyframes tologin {
        0% {
            left: -140px
        }
        100% {
            left: 50%
        }
    }

    @keyframes tologin {
        0% {
            left: -140px
        }
        100% {
            left: 50%
        }
    }

    .tologin, .tosign_up, .tosign_up2, .tologin2 {
        display: none;
    }

    .tologin {
        -webkit-animation-name: tologin;
        animation-name: tologin;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    .tosign_up {
        text-align: right;
        color: #fff !important;
        margin-right: 6px
    }

    .tosign_up2 {
        float: right;
        color: #fff;
        margin: 10px 10px 10px 0px
    }

    .tologin {
        margin-top: 10px;
        margin-right: 10px;
        text-align: right;
    }

    .tologin2 {
        float: right;
        color: #fff;
        margin: 10px 10px 10px 0px
    }

    @media screen and (max-width: 650px) {
        .cont_login {
            left: 0px;
            margin: 0px;
            left: 50%;
            margin-left: -160px;
            position: relative;
        }

        .cont_forms_active_sign_up {
            left: 0px;
            margin: 0px;
            left: 50%;
        }

        .tologin, .tosign_up, .tosign_up2, .tologin2 {
            display: block;
        }
    }

    .cont_forms_active_login .cont_img_back_ img {
    }

    .login-wrap {
        width: 100vw;
        height: 100vh;
        background-color: #324157;
    }

    .login-title {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -230px;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }

    .login-panel {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 160px;
        margin: -150px 0 0 -190px;
        padding: 40px;
        border-radius: 5px;
        background: #fff;
        text-align: center;
    }

    .login-name {
        margin-bottom: 1rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        box-sizing: border-box;
        color: #1f2d3d;
        display: block;
        font-size: inherit;
        height: 36px;
        line-height: 1;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }

    .login-pwd {
        margin-bottom: 1rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        box-sizing: border-box;
        color: #1f2d3d;
        display: block;
        font-size: inherit;
        height: 36px;
        line-height: 1;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }

    .login-submit {
        width: 300px;
        border-color: #4db3ff;
        color: #fff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #bfcbd9;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        padding: 10px 15px;
        font-size: 14px;
        border-radius: 4px;
        background-color: #20a0ff;
    }

    .case-number {
        margin-top: 1rem;
        font-size: 14px;
        color: #5d5d5d;
    }

    @-webkit-keyframes cont_form_sign_upadd {
        0% {
            left: 0px;
        }
        100% {
            left: 320px;
        }
    }

    @keyframes cont_form_sign_upadd {
        0% {
            left: 0px;
        }
        100% {
            left: 320px;
        }
    }

    .cont_form_sign_upadd {
        z-index: 999;
        -webkit-animation-name: cont_form_sign_upadd;
        animation-name: cont_form_sign_upadd;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    @-webkit-keyframes fadeup {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0, -40px, 0);
            transform: translate3d(0, -40px, 0)
        }
    }

    @keyframes fadeup {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0, -40px, 0);
            transform: translate3d(0, -40px, 0)
        }
    }

    .fadeup {
        -webkit-animation-name: fadeup;
        animation-name: fadeup;
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    @-webkit-keyframes fadedown {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0)
        }
    }

    @keyframes fadedown {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0)
        }
    }

    .fadedown {
        -webkit-animation-name: fadedown;
        animation-name: fadedown;
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: none;
        position: relative;
        top: -69px;
        overflow: hidden;
        border-radius: 50%;
        border: 4px solid #fff;
        box-shadow: 1px 2px 2px rgba(0, 0, 0, .1)
    }

    .avatar img {
        width: 100%;
    }

    #name {
        color: #fff;
        position: relative;
        top: -60px;
        text-align: center;
        font-weight: 100;
        font-size: 20px;
        text-shadow: 1px 2px 2px rgba(0, 0, 0, .1)
    }

    #loginbtn {
        background-color: #FF9800;
        border: none;
        padding: 10px;
        width: 200px;
        border-radius: 3px;
        box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.4);
        color: #fff;
        cursor: pointer;
        z-index: 99999;
        position: relative;
        display: none;
        position: relative;
        top: -30px
    }

    @-webkit-keyframes fadeupin {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -40px, 0);
            transform: translate3d(0, -40px, 0)
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes fadeupin {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -40px, 0);
            transform: translate3d(0, -40px, 0)
        }
        100% {
            opacity: 1;
        }
    }

    .fadeupin {
        -webkit-animation-name: fadeupin;
        animation-name: fadeupin;
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: block !important
    }

    .sk-double-bounce {
        width: 40px;
        height: 40px;
        position: relative;
        margin: 40px auto;
    }

    .sk-double-bounce .sk-child {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
        animation: sk-doubleBounce 2s infinite ease-in-out;
    }

    .sk-double-bounce .sk-double-bounce2 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    @-webkit-keyframes sk-doubleBounce {
        0%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes sk-doubleBounce {
        0%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    .toggleuser {
        color: #fff;
        z-index: 999999;
        position: relative;
        cursor: pointer;
        display: none
    }

    .toggleuser:hover {
        color: #20A0FF;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    #err {
        font-size: 18px;
        color: #fff;
        letter-spacing: 1px;
        display: none
    }

    #canvas {
        position: relative;
        z-index: 999999;
        height: 100%;
        position: fixed;
        left: 0px;
        top: 0px;
    }

    .cotn_principal {
        z-index: 9999999999999;
    }

    #v_container {
        float: left;
        margin-left: 10px
    }

    .cont_form_logintoggle {
        margin-top: 0px;
        z-index: 9999;
        top: -80px;
    }

    .cont_form_logintogglehas {
        top: 80px !important
    }
</style>
<body>


<div class="cotn_principal">
    <div class="cont_centrar">
        <canvas width="1903" height="404" id="canvas"></canvas>

        <div class="cont_login">
            <div class="cont_info_log_sign_up">
                <div class="col_md_login">
                    <p class="tosign_up">切换为注册</p>
                    <div class="cont_ba_opcitiy">
                        <h2>编辑器</h2>
                        <p>在线的markdown编辑器</p>
                        <button class="btn_login" onclick="cambiar_login()">我要使用</button>
                    </div>
                </div>
                <div class="col_md_sign_up">
                    <p class="tologin">切换为登录</p>

                    <div class="cont_ba_opcitiy">
                        <h2>登录</h2>
                        <p>仅限博主登录</p>
                        <button class="btn_sign_up" onclick="cambiar_sign_up()">登录</button>
                    </div>
                </div>
            </div>
            <div class="cont_back_info">
                <div class="cont_form_login cont_form_logintoggle">
                    <a href="#"
                                                                      onclick="ocultar_login_sign_up()"><i
                        class="material-icons"></i></a>
                    <p class="tosign_up2">切换为注册</p>
                    <h2>登录您的GitHub</h2>
                    <div class="avatar">
                        <div class="sk-double-bounce">
                            <div class="sk-child sk-double-bounce1"></div>
                            <div class="sk-child sk-double-bounce2"></div>
                        </div>
                        <img src="" alt="" id="avatarsrc">
                    </div>
                    <h1 id="name"></h1>
                    <h1 id="err">未找到该账号</h1>
                    <button id="loginbtn">确认登录</button>
                    <p class="toggleuser">切换账号</p>
                    <input type="text" class="login-name" id="githubname" placeholder="请输入您的用户名"/>
                    <button class="login" id="gitloginbtn" onclick="cambiar_login()">确定</button>

                </div>

                <div class="cont_img_back_grey">
                    <img src="dist/po.jpg" alt=""/>
                </div>
            </div>
            <div class="cont_forms">
                <div class="cont_img_back_">
                    <img src="dist/po.jpg" alt=""/>
                </div>

            </div>
            <div class="cont_form_sign_up">
                <a class="close2" onclick="ocultar_login_sign_up()"><i
                        class="material-icons"></i></a>
                <p class="tologin2">切换为登录</p>
                <h2>登录</h2>
                <input type="text" id="login-name" placeholder="请输入您的账号"/>
                <input type="password" id="login-pwd" placeholder="请输入您的密码"/>
                <div class="qrcodebox">
                    <input type="text" id="usercode" placeholder="请输入验证码"/>
                    <div id="v_container" style="width: 140px;height: 45px;"></div>
                </div>
                <button class="btn_sign_up" id="btn_sign_up">提交</button>
            </div>
        </div>
    </div>
</div>
</div>


<script>
  window.onload = function () {
    var lid = localStorage.getItem('lid');
    if (lid) {
      $.ajax({
        url: '/api/auth',
        type: 'POST',
        data: {lid: lid},
        success: function (data) {
          console.log(data)
        }
      });
    }
    var login = document.getElementById('btn_sign_up');
    var userget = JSON.parse(localStorage.getItem('user'));
    if (!!userget) {
      $('.cont_form_login h2')
        .addClass('fadeup');
      $('.cont_form_login input')
        .addClass('fadeup');
      $('#gitloginbtn')
        .addClass('fadedown');
      $('.sk-double-bounce')
        .hide();
      $('.avatar')
        .fadeIn();
      $('#avatarsrc')
        .attr('src', userget.avatar_url);
      $('#name')
        .text(userget.name);
      $('#loginbtn')
        .addClass('fadeupin');
      $('.toggleuser')
        .addClass('fadeupin');
    }
    login.addEventListener('click', function () {
      var loginName = $('#login-name')
        .val();
      var loginPwd = $('#login-pwd')
        .val();
      var usercode = $('#usercode')
        .val();
      if (!loginName || !loginName) {
        alert('账号或密码不能为空');
        return false;
      } else if (!usercode) {
        alert('您还未输验证码');
        return false;
      }
//            验证码
      $.ajax({
        url: '/api/checkcode',
        type: 'post',
        data: {code: usercode},
        success: function (data) {
          if (data.err === 200) {
            var name = document.getElementById('login-name').value;
            var pwd = document.getElementById('login-pwd').value;
            $.ajax({
              url: '/api/login',
              type: 'post',
              data: {user: name, pass: md5(pwd)},
              success: function (data) {
                if (data.err == 200) {
                  localStorage.setItem('lid', data.token);
                  window.location.href = 'http://admin.binlive.cn/admin/articleEdit';
                } else {
                  alert('账号或密码错误');
                  updateverifyCanvas();
                }
              }
            });
          } else {
            alert('验证码输入错误');
            updateverifyCanvas();
          }
        }
      });
    });
  };


  $('#gitloginbtn')
    .on('click', function () {
      if ($('#githubname')
          .val() === '') {
        alert('您还未输入');
        return;
      }
      $('.cont_form_login h2')
        .addClass('fadeup');
      $('.cont_form_login input')
        .addClass('fadeup');
      $('#gitloginbtn')
        .addClass('fadedown');
      $('.avatar')
        .fadeIn();
      $('#avatarsrc')
        .attr('src', '');
      $('#name')
        .text('');
      var gitname = $('#githubname')
        .val();
      var url = 'https://api.github.com/users/' + gitname;
      $.ajax({
        url: url,
        type: 'get',
        success: function (data) {
          var user = {
            avatar_url: '',
            name: '',
            html_url: ''
          };
          user.avatar_url = data.avatar_url;
          user.name = data.name;
          user.html_url = data.html_url;
          if (data.name === null) {
            $('.avatar')
              .hide();
            $('#name')
              .hide();
            $('#err')
              .show();
            $('.toggleuser')
              .addClass('fadeupin');
          } else {
            localStorage.setItem('user', JSON.stringify(user));
            $('.sk-double-bounce')
              .hide();
            $('#avatarsrc')
              .attr('src', data.avatar_url);
            $('#name')
              .text(data.name);
            $('#loginbtn')
              .addClass('fadeupin');
            $('.toggleuser')
              .addClass('fadeupin');

            $.ajax({
              url: '/api/public',
              type: 'post',
              data: {UserName: gitname},
              success: function (data) {
//                            window.location.href="http://www.binlive.cn/public"
              }
            });
          }

        },
        error: function (err) {
          $('.avatar')
            .hide();
          $('#name')
            .hide();
          $('#err')
            .show();
          $('.toggleuser')
            .addClass('fadeupin');

        }
      });
    });

  $('#loginbtn')
    .on('click', function () {
      var userget = JSON.parse(localStorage.getItem('user'));
      $.ajax({
        url: '/api/public',
        type: 'post',
        data: {UserName: userget.name},
        success: function (data) {
          if (data.code == 0) {
            window.location.href = 'http://www.binlive.cn/public';
          }
        }
      });
    });

  $('.toggleuser')
    .on('click', function () {
      $(this)
        .removeClass('fadeupin');
      $('.avatar')
        .hide();
      $('#name')
        .hide();
      $('#loginbtn')
        .hide();
      $('#err')
        .hide();

      $('.cont_form_login h2')
        .removeClass('fadeup');
      $('.cont_form_login input')
        .removeClass('fadeup');
      $('#gitloginbtn')
        .removeClass('fadedown');
      $('#loginbtn')
        .removeClass('fadeupin');
    });

  function cambiar_login() {
    window.location.href = 'http://mark.binlive.cn';
  }
  function cambiar_sign_up(at) {
    setTimeout(function () {
      $('#login-name')
        .focus();

    }, 100);
    $('#usercode')
      .val('');
    updateverifyCanvas();
    document.querySelector('.cont_forms').className = 'cont_forms cont_forms_active_sign_up';
    document.querySelector('.cont_form_sign_up').style.display = 'block';
    document.querySelector('.cont_form_login').style.opacity = '0';
    document.querySelector('.cont_form_sign_up')
      .classList
      .add('cont_form_sign_upadd');
    setTimeout(function () {
      document.querySelector('.cont_form_sign_up').style.opacity = '1';
    }, 100);
    $('.login')
      .hide();
    setTimeout(function () {
      document.querySelector('.cont_form_login').style.display = 'none';
    }, 400);
  }

  function ocultar_login_sign_up() {
    $('.login')
      .fadeOut();
    document.querySelector('.cont_forms').className = 'cont_forms';
    document.querySelector('.cont_form_sign_up').style.opacity = '0';
    document.querySelector('.cont_form_login').style.opacity = '0';

    setTimeout(function () {
      document.querySelector('.cont_form_sign_up').style.display = 'none';
      document.querySelector('.cont_form_login').style.display = 'none';
    }, 500);

  }

  // 切换成注册
  $('.tosign_up')
    .on('click', function () {
      $('.cont_login')
        .removeClass('tologin')
        .addClass('tosign_up');
    });
  $('.tosign_up2')
    .on('click', function () {
      ocultar_login_sign_up();
      $('.cont_login')
        .removeClass('tologin')
        .addClass('tosign_up');
    });
  // 切换成登录
  $('.tologin')
    .on('click', function () {
      $('.cont_login')
        .removeClass('tosign_up')
        .addClass('tologin');
    });
  $('.tologin2')
    .on('click', function () {
      ocultar_login_sign_up();
      $('.cont_login')
        .removeClass('tosign_up')
        .addClass('tologin');
    });
  $(function () {
    var canvas = document.querySelector('canvas'),
      ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.lineWidth = .3;
    ctx.strokeStyle = (new Color(150)).style;

    var mousePosition = {
      x: 30 * canvas.width / 100,
      y: 30 * canvas.height / 100
    };

    var dots = {
      nb: 150,
      distance: 50,
      d_radius: 100,
      array: []
    };

    function colorValue(min) {
      return Math.floor(Math.random() * 255 + min);
    }

    function createColorStyle(r, g, b) {
      return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
    }

    function mixComponents(comp1, weight1, comp2, weight2) {
      return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
    }

    function averageColorStyles(dot1, dot2) {
      var color1 = dot1.color,
        color2 = dot2.color;

      var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
        g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
        b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
      return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
    }

    function Color(min) {
      min = min || 0;
      this.r = colorValue(min);
      this.g = colorValue(min);
      this.b = colorValue(min);
      this.style = createColorStyle(this.r, this.g, this.b);
    }

    function Dot() {
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;

      this.vx = -.5 + Math.random();
      this.vy = -.5 + Math.random();

      this.radius = Math.random() * 2;

      this.color = new Color();
    }

    Dot.prototype = {
      draw: function () {
        ctx.beginPath();
        ctx.fillStyle = this.color.style;
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        ctx.fill();
      }
    };

    function createDots() {
      for (i = 0; i < dots.nb; i++) {
        dots.array.push(new Dot());
      }
    }

    function moveDots() {
      for (i = 0; i < dots.nb; i++) {

        var dot = dots.array[i];

        if (dot.y < 0 || dot.y > canvas.height) {
          dot.vx = dot.vx;
          dot.vy = -dot.vy;
        }
        else if (dot.x < 0 || dot.x > canvas.width) {
          dot.vx = -dot.vx;
          dot.vy = dot.vy;
        }
        dot.x += dot.vx;
        dot.y += dot.vy;
      }
    }

    function connectDots() {
      for (i = 0; i < dots.nb; i++) {
        for (j = 0; j < dots.nb; j++) {
          i_dot = dots.array[i];
          j_dot = dots.array[j];

          if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
            if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
              ctx.beginPath();
              ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
              ctx.moveTo(i_dot.x, i_dot.y);
              ctx.lineTo(j_dot.x, j_dot.y);
              ctx.stroke();
              ctx.closePath();
            }
          }
        }
      }
    }

    function drawDots() {
      for (i = 0; i < dots.nb; i++) {
        var dot = dots.array[i];
        dot.draw();
      }
    }

    function animateDots() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      moveDots();
      connectDots();
      drawDots();

      requestAnimationFrame(animateDots);
    }

    $('canvas')
      .on('mousemove', function (e) {
        mousePosition.x = e.pageX;
        mousePosition.y = e.pageY;
      });

    $('canvas')
      .on('mouseleave', function (e) {
        mousePosition.x = canvas.width / 2;
        mousePosition.y = canvas.height / 2;
      });

    createDots();
    requestAnimationFrame(animateDots);
  });


  function updateverifyCanvas() {
    $('#verifyCanvas').remove();
    $.ajax({
      url: '/api/getVerif',
      type: 'get',
      success: function (data) {
        //    code
        var verifyCode = new GVerify({id: 'v_container', code: data.Verifcode});
      }
    });
  }
  $('#v_container').on('click', function () {
    updateverifyCanvas();
  });
</script>
</body>
</html>
